<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web即使通讯案例demo</title>
    <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
    <style>
        .content{
            height: 300px;
            width: 400px;
            background-color: beige;
        }
        body{
            background-color:#669999;
        }
    </style>
</head>
<body>
    <div style="margin: auto;width: 360px; margin-top: 50px">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">登录</li>
                <li>注册</li>
            </ul>
            <div class="layui-tab-content">
                <!--登录-->
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" action="" >
                        <div class="layui-form-item">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" lay-verify="name" placeholder="请输入账号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="pass" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!--注册-->
                <div class="layui-tab-item">
                    <form class="layui-form" action="" >
                        <div class="layui-form-item">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" lay-verify="name" placeholder="请输入账号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="pass" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nickname" lay-verify="nickname" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="register">立即注册</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>


    </div>


</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="layui/layui.all.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate','element'], function(){
        var form = layui.form,layer = layui.layer, element = layui.element;
        //自定义验证规则
        form.verify({
            name: function(value){
                if(value.length < 5){
                    return '账户不能为空';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
        //监听提交
        form.on('submit(demo1)', function(data){
            $.ajax({
                url:"http://120.78.67.1:9502",
                type:'POST',
                dataType:'JSON',
                async:false,
                data:data.field,
                success: function(data){
                    if(data.status==10000){
                        layer.msg(data.msg,{time:2000,icon:1},function () {
                            window.location.href='test.php?token='+data.data.token
                        })
                    }else{
                        layer.msg(data.msg,{time:2000,icon:2});
                    }
                }
            });
//            $.post("http://localhost:9502", data.field, function(result) {
//                // 请求处理
//                console.log(result);
//            },"json");
            return false;
        });
        // 注册
        form.on('submit(register)', function(data){
            $.ajax({
                url:"http://120.78.67.1:9502",
                type:'POST',
                dataType:'JSON',
                async:false,
                data:data.field,
                success: function(data){
                    if(data.status==10000){
                        layer.msg(data.msg,{time:2000,icon:1},function () {
                            window.location.reload();
                        })
                    }else{
                        layer.msg(data.msg,{time:2000,icon:2});
                    }
                }
            });
//            $.post("http://localhost:9502", data.field, function(result) {
//                // 请求处理
//                console.log(result);
//            },"json");
            return false;
        });
    });
</script>
</html>